<template >
    <div>
        <el-card class="filter-container" shadow="never">
          <div>
          <i class="el-icon-search"></i>
          <span>筛选搜索</span>
          <el-button style="float:right; margin-right: 30px" type="success" @click="showUploadModal = true" >
            导入 </el-button>
          <el-button style="float:right; margin-right: 30px" type="primary" @click="handleSearch()" >
            查询 </el-button>
          <el-button style="float:right;margin-right: 15px" @click="handleResetSearch()" >
            重置 </el-button>
        </div>
        <el-dialog title="文件上传(请只选择一个.xls/.xlsx文件)" v-model="showUploadModal">
        <div>
          <el-upload ref="upload" drag :before-upload="beforeUpload" :on-change="handleChange" :on-remove="handleRemoveChange"
          :on-exceed="handleListExceed" :http-request="importExcel" :on-preview="handlePreview" :auto-upload="false" :limit="1">
            <div style="margin-bottom: 12px; text-align: center;">
              <i class="el-icon-upload"></i>
              <p style="font-size: 16px; margin: 10px 0;">点击或者拖动文件到该区域来上传</p>
            </div>
          </el-upload>

          <div style="width: 100%; margin-top: 30px; display: flex; justify-content: center;">
            <el-button type="success" @click="handleClick" :disabled="UpLoadDisabled">
              上传
            </el-button>
          </div>
        </div>
      </el-dialog>
      <el-dialog title="上传信息一览" v-model="showUpTableModal" :close-on-press-escape="false" :close-on-click-modal="false"
        @close="handleClose" width="1200px" @update:visible="confirmClose">
        <ConfirmTable
          :uuid="uploadConfirmData?.uuid"
          :successList="uploadConfirmData?.successList"
          :failList="uploadConfirmData?.failList"
          @close="handleConfirmTableClose" />
      </el-dialog>  
        <div style="margin-top: 30px; " >
          <el-form style="display: inline-block;" >
          <!-- <el-form :inline="true" :model="listQuery" size="small" label-width="140px"> -->
            <div style="display: inline-block;margin-left:40px">
            <el-form-item label="工人姓名：">
              <el-input  class="input-width" v-model="queryParams.userName" placeholder="工人姓名" clearable ></el-input>
            </el-form-item>
            </div>
            <div style="display: inline-block;margin-left:40px">
              <el-form-item label="小组身份：">
               <el-input  class="input-width" v-model="queryParams.roleName" placeholder="小组身份" clearable></el-input>
              </el-form-item>
            </div>
            <div style="display: inline-block;margin-left:40px">
              <el-form-item label="小组名：">
               <el-input  class="input-width" v-model="queryParams.groupName" placeholder="小组名" clearable></el-input>
              </el-form-item>
            </div>     
          </el-form>
        </div>
        </el-card>
    </div>
      <div class="table-container">
        <el-table :data="tableData.list" ref="multipleTable" tooltip-effect="dark" border style="width: 100%" stripe>
          <el-table-column  prop="userName" label="工人姓名" align="center"/>
          <el-table-column  prop="phone" label="电话号码" align="center"/>
          <el-table-column  prop="roleName" label="小组身份" align="center"/>
          <el-table-column  prop="groupName" label="小组名" align="center"/>
          <el-table-column fixed="right" label="操作" min-width="120" class="operate-button-container" align="center">
            <template #default>
              <el-button type="warning" size="small" @click="dialogTableVisible3=true">
                编辑
              </el-button>
              <el-button type="danger" size="small">删除</el-button>
             </template>
         </el-table-column>
        </el-table> 
      </div>
      <el-pagination
      v-model:currentPage="queryParams.pageNum"
      v-model:page-size="queryParams.pageSize"
      background
      layout="prev, pager, next, total, sizes"
      :page-sizes="[10,20,50]"
      :size="size"
      :total="tableData.total"
      :current-page ="queryParams.pageNum"
      :page-size="queryParams.pageSize" 
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
     </template>
<script setup>
import { getStaffByPage,importVerifyStaff } from '../../../api';
import { ref, reactive, onMounted, VueElement } from 'vue'
import { ElMessage } from 'element-plus';
import ConfirmTable from './confirmTable.vue';

const tableData = reactive({
  list: [],
  pageNum:'',
  pageSize:'',
  total:'',
  totalPage:''
})

onMounted(() => {
    getData();
    handleSearch();
});


// // 当前页变化处理
const handleCurrentChange = (val) => {

  queryParams.pageNum = val; // 更新当前页码
  console.log("val:",val)
  console.log("queryParams.pageNum:",queryParams.pageNum)
  handleSearch();
};

// 页面大小变化处理
const handleSizeChange = (val) => {
  queryParams.pageSize = val; // 更新每页条目数
  console.log("val2:",val)
  console.log("queryParams.pageSize",queryParams.pageSize)
  handleSearch(); 
};
//查询
const handleSearch = async () => {
  console.log('查询内容1', queryParams.value)
  let res = await getStaffByPage(queryParams.value)
  console.log('查询内容', res.data)
  tableData.list = res.data.list;

  console.log('返回数据',tableData.list)
  console.log('total',res.data.totalPage)
    let total = res.data.totalPage
    tableData.totalPage = res.data.totalPage
    tableData.total =Number(res.data.total) 
    tableData.pageNum = res.data.pageNum

    console.log('totalzongde', tableData.total)
    console.log('zongde',tableData)
 
}
const showUploadModal = ref(false)
const showUpTableModal = ref(false);

const fileList = ref([]);
const fileListLength = ref(0);
const upload = ref(null);

let queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    userName:'',
    roleName:'',
    groupName:''
});

const uploadConfirmData = ref({
  uuid: '',
  successList: [],
  failList: []
});

const getData = function() {
  getStaffByPage(queryParams.value)
        .then(function(response) {
            tableData.list = response.data.list;
          //  console.log('response',response)
            tableData.total=Number(response.data.total)
            // tableData.pageNum = response.data.pageNum
            // tableData.pageSize = response.data.pageSize
        })
};

const UpLoadDisabled = ref(true)

function handleChange(options) {
  
  UpLoadDisabled.value = false
  fileList.value = [options.raw?1:null]
  fileListLength.value = fileList.length;
  console.log(fileListLength.value)
  console.log(options)
}
function handleRemoveChange(options) {
  UpLoadDisabled.value = true
}

function handleListExceed() {
  UpLoadDisabled.value = false
}

function handleClick() {
  upload.value?.submit();
  console.log("11111111")
  console.log(upload.value)
}

const beforeUpload = (file) => {
  console.log('beforeupload');
  console.log(file.type);
  const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
    file.type === 'application/vnd.ms-excel';
  if (!isExcel) {
    ElMessage.error('只能上传xls或xlsx格式的文件，请重新上传');
    return false;
  }

  return true;
};

const importExcel = async ({ file }) => {
  const formData = new FormData();
  formData.append("file", file);
  console.log(fileListLength.value);
  try {
    const { code, data } = await importVerifyStaff(formData);
    console.log(formData);
    console.log(data);
    if (code !== 200) {
      ElMessage.error("请确认上传文件是否正确");
      return;
    }

    showUploadModal.value = false;
    const dataTemp = {
      uuid: data.id,
      successList: data.successList,
      failList: data.failList
    }
    uploadConfirmData.value = dataTemp;
    console.log(uploadConfirmData.value.uuid);
    showUpTableModal.value = true;
  } catch (error) {
    console.log("到这里来了吗")
    console.error(error);
  } finally {
    // 清空upload组件的文件列表
    upload.value?.clearFiles();
    fileListLength.value = 0;
  }
};


</script>
<style lang="less">
     
</style>